<template>
 <div class="urlNavBorder">
   <div class="urlNav">
     <a :href="item.url" target="_blank" v-for="(item,index) in this.navCards" :key="index" :title="item.name">
       <div class="urlCards">
         <img class="navCardsImage" :src="item.img" alt="">
         <span class="urlCardsText">{{item.name}}</span>
       </div>
     </a>
   </div>
 </div>
</template>

<script>

export default {
  name: "NavUrl",
  props:{
    navCards: []
  }
}
</script>

<style>
.urlNavBorder {
  margin: auto;
  max-width: 1236px;
}
.urlNav{
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
}
.urlCards{
  height: 56px;
  border: 2px solid white;
  border-radius: 10px;
  margin: 12px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  transition: background-color 0.6s;
  overflow: hidden;
}
.navCardsImage{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #565555;
  position: absolute;
  top: 12%;
  left: 10px;
  background-color: white;
}
.urlCardsText{
  position: absolute;
  left: 70px;
  line-height: 56px;
 }
</style>